<template>
  <teleport to="body">
    <div class="rb-preview-wrapper" :class="{ end: isOffice || isTxt }">
      <div class="preview-mask"></div>
      <img
        class="close-btn"
        src="@/assets/images/message/icon-close.svg?url"
        @click="$emit('close')"
      />
      <div class="preview-container">
        <AudioPreview v-if="isAudio" :fileUrl="fileUrl" />
        <ImgPreview v-if="isImage" :fileUrl="fileUrl" />
        <VideoPreview v-if="isVideo" :fileUrl="fileUrl" />
        <OfficePreview v-if="isOffice" :fileUrl="fileUrl" />
        <TxtPreview v-if="isTxt" :fileUrl="fileUrl" />
      </div>
    </div>
  </teleport>
</template>

<script setup>
import AudioPreview from './AudioPreview.vue'
import ImgPreview from './ImgPreview.vue'
import VideoPreview from './VideoPreview.vue'
import OfficePreview from './OfficePreview.vue'
import TxtPreview from './TxtPreview.vue'
import { computed } from 'vue'

const props = defineProps({
  // fileUrl: {
  //   type: String,
  //   default:
  //     'https://rbebag-zy-test.strongwind.cn/cloudStore/66e5eaaf-83ba-45e2-8610-07234325801a/2024/08/26/3441462360226958.jpg'
  // }
  // fileUrl: { type: String, default: 'https://contres.readboy.com//resources/jiaoan/202065/EC/BA/9669778210/主题导入：上学歌.mp3' }
  // fileUrl: { type: String, default: 'https://contres.readboy.com//resources/jiaoan/202065/13/8E/9668198210/zh ch sh r儿歌.mp4' }
  // fileUrl: { type: String, default: 'https://rbebag-zy-test.strongwind.cn/cloudStore/66e5eaaf-83ba-45e2-8610-07234325801a/2024/08/26/3441462450226964.pdf' }
  fileUrl: {
    type: String,
    default:
      'https://rbebag-zy-test.strongwind.cn/dream_question_bank/resource/01203559646930154925.txt'
  }
})

defineEmits(['close'])

const fileExt = computed(() => props.fileUrl.split('.').pop())

const isAudio = computed(() => ['mp3', 'wav', 'ogg'].includes(fileExt.value))
const isImage = computed(() =>
  ['jpg', 'jpeg', 'png', 'gif'].includes(fileExt.value)
)
const isVideo = computed(() =>
  ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(fileExt.value)
)
const isOffice = computed(() =>
  ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'].includes(fileExt.value)
)
const isTxt = computed(() => ['txt'].includes(fileExt.value))
</script>

<style lang="less" scoped>
.rb-preview-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  &.end {
    align-items: flex-end;
  }
  .preview-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .close-btn {
    position: absolute;
    z-index: 1;
    top: 50px;
    right: 50px;
    width: 70px;
    cursor: pointer;
  }
  .preview-container {
    position: relative;
  }
}
</style>
